<div class="test">
    <span class="bot"></span>
    <span class="top"></span>
    CSS “边框法”实现气泡对话框效果一
</div>
<br>
<br>
<br>

<p class="triangle-border left">But it could be any element you want.</p>
<br>
<br>

<p class="triangle-isosceles">This only needs one HTML element.</p>
<style>
.triangle-border.left {
    margin-left: 30px;
}
.triangle-border {
    position: relative;
    padding: 15px;
    margin: 1em 0 3em;
    border: 5px solid #5a8f00;
    color: #333;
    background: #fff;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
}
.triangle-border.left:before {
    top: 10px;
    bottom: auto;
    left: -30px;
    border-width: 15px 30px 15px 0;
    border-color: transparent #5a8f00;
}
.triangle-border:before {
    content: "";
    position: absolute;
    bottom: -20px;
    left: 40px;
    border-width: 20px 20px 0;
    border-style: solid;
    border-color: #5a8f00 transparent;
    display: block;
    width: 0;
}
.triangle-border.left:after {
    top: 16px;
    bottom: auto;
    left: -21px;
    border-width: 9px 21px 9px 0;
    border-color: transparent #fff;
}

.triangle-border:after {
    content: "";
    position: absolute;
    bottom: -13px;
    left: 47px;
    border-width: 13px 13px 0;
    border-style: solid;
    border-color: #fff transparent;
    display: block;
    width: 0;
}


    .test {
        width: 300px;
        padding: 30px 20px;
        border: 5px solid #beceeb;
        position: relative;
    }

    .test span {
        width: 0;
        height: 0;
        font-size: 0;
        overflow: hidden;
        position: absolute;
    }

    .test span.bot {
        border-width: 10px;
        border-style:  solid  dashed dashed ;
        border-color:  transparent #beceeb transparent transparent ;
        left: 80px;
        bottom: -40px;
    }

    .test span.top {
        border-width: 10px;
        border-style:  solid  dashed dashed ;
        border-color:  transparent #beceeb transparent transparent ;
        left: 80px;
        bottom: -33px;
    }





    .triangle-isosceles {
    position: relative;
    padding: 15px;
    margin: 1em 0 3em;
    color: #000;
    background: #f3961c;
    background: -webkit-gradient(linear, 0 0, 0 100%, from(#f9d835), to(#f3961c));
    background: -moz-linear-gradient(#f9d835, #f3961c);
    background: -o-linear-gradient(#f9d835, #f3961c);
    background: linear-gradient(#f9d835, #f3961c);
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
}

.triangle-isosceles:after {
    content: "";
    position: absolute;
    bottom: -15px;
    left: 50px;
    border-width: 15px 15px 0;
    border-style: solid;
    border-color: #f3961c transparent;
    display: block;
    width: 0;
}
</style>